<template>
	<div class="list">
		<div class="current" ref="current" :style="{backgroundImage:'url(' +current + ')'}" @mouseenter="enter($event)"
		     @mouseleave="leave($event)">
			<div class="mask" ref="mask"></div>
		</div>
		<div class="carousel" @touchstart.stop="scrollStart($event)" @touchmove.stop="scrollMove($event)">
			<i class="arrow-left" @click="scroll(-120)"></i>
			<div class="content" ref="content">
				<img v-for="item in value" :src="item.fullUrl" @mouseover="current=item.fullUrl"/>
			</div>
			<i class="arrow-right" @click="scroll(120)"></i>
		</div>
		<div class="zoom" ref="zoom" :style="{backgroundImage:'url(' +current + ')'}"/>
	</div>
</template>
<script>

	export default {
		props: {
			value: {
				type: Array, default() {
					return [];
				}
			}
		},
		data() {
			return {
				scrollStartX: 0,
				moveStartX: 0,
				current: (this.value[0] || {}).fullUrl || "",
				dom_pos: {}
			}
		},
		watch: {
			value: {
				deep: true, handler(v) {
					if (!v || !v[0]) return;

					this.current = v[0].fullUrl;
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				setTimeout(() => {
					this.$refs["content"].style.overflowX = "hidden";
				}, 10);
			});
		},
		methods: {
			scroll(value) {
				var content = this.$refs["content"];
				content.scrollBy(value, 0);
			},
			move_work(e) {
				var dx = e.clientX - this.dom_pos.x - this.dom_pos.width / 4,
					dy = e.clientY - this.dom_pos.y - this.dom_pos.height / 4;

				dx = Math.max(0, dx);
				dy = Math.max(0, dy);
				dx = Math.min(dx, this.dom_pos.width / 2);
				dy = Math.min(dy, this.dom_pos.height / 2);

				this.$refs["mask"].style.cssText += ";left:" + dx + "px;top:" + dy + "px;";
				this.$refs["zoom"].style.cssText += ";background-position:" + (2 * (0 - dx)) + "px " + (2 * (0 - dy)) + "px;";
			},
			enter(e) {
				var current = this.$refs["current"];

				var zoom = this.$refs["zoom"];
				zoom.style.display = "block";

				this.dom_pos = current.getBoundingClientRect();
				removeEventListener("mousemove", this.move_work);
				addEventListener("mousemove", this.move_work);
			},
			leave(e) {
				var current = this.$refs["current"];
				var zoom = this.$refs["zoom"];
				zoom.style.display = "none";
				removeEventListener("mousemove", this.move_work);
			},
			scrollStart(e) {
				var content = this.$refs["content"];
				this.scrollStartX = content.scrollLeft;
				this.moveStartX = e.touches[0].clientX;
			},
			scrollMove(e) {
				var content = this.$refs["content"];
				content.scrollLeft = this.scrollStartX + (this.moveStartX - e.touches[0].clientX);
			}
		}
	}

</script>
<style scoped>
	.list {
		position: relative;
	}

	.list .current {
		width: 48rem;
		height: 48rem;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		position: relative;
	}

	.list .current .mask {
		width: 24rem;
		height: 24rem;
		background-color: #FFFF00;
		opacity: 0.3;
		position: absolute;
		display: none;
	}

	.list .current:hover .mask {
		display: block;
	}

	.list .zoom {
		position: absolute;
		width: 48rem;
		height: 48rem;
		left: 49rem;
		top: 0;
		display: none;
		background-size: 200% 200%;
		background-repeat: no-repeat;
	}

	.arrow-left {
		background: url(../assets/arrow.png) no-repeat;
		background-position: 0 0;
	}

	.arrow-left:hover {
		background: url(../assets/arrow.png) no-repeat;
		background-position: -22px 0;
	}

	.arrow-right {
		background: url(../assets/arrow.png) no-repeat;
		background-position: 0 -33px;
	}

	.arrow-right:hover {
		background: url(../assets/arrow.png) no-repeat;
		background-position: -23px -33px;
	}

	.carousel {
		display: flex;
		flex-direction: row;
		width: 48rem;
		align-items: center;
	}

	.carousel i {
		width: 23px;
		height: 33px;
		z-index: 99;
	}

	.carousel .content {
		width: 48rem;
		border-left: solid 30px transparent;
		border-right: solid 30px transparent;
		margin-left: -30px;
		margin-right: -30px;
		display: flex;
		box-sizing: border-box;
	}

	.carousel .content img {
		width: 100px;
		height: 100px;
		min-width: 100px;
		min-height: 100px;
		border: solid 2px white;
	}

	.carousel .content img:hover {
		border: solid 2px red;
	}

	@media screen and (max-width: 60rem) {
		.carousel .content {
			width: 90vw;
		}

		.list .current {
			width: 90vw;
			height: 90vw;
		}

		.carousel {
			width: auto;
		}

		.list .zoom {
			display: none !important;
		}

		.list .current:hover .mask {
			display: none !important;
		}
	}
</style>
